<template>
  <view class="base-picker">
    <picker :range="range" :value="itemIndex" @change="bindPickerChange">
      <uni-easyinput :input-border="false" :styles="{ disableColor: '#fff', color: '#666666'}"
                     :value="showItemName" disabled placeholder="请选择" suffix-icon="right"  clearable :clearSize='12'/>
    </picker>
  </view>
</template>

<script>
export default {
  props: { 
    localdata: {type: Array, default: () => ([])},
    modelValue: {type: [String, Number], default: ''},
  },
  emits: ['update:modelValue', 'change'],
  data() {
    return {
      itemIndex: undefined,
      showItemName: '',
      isOpenSelector: false,
      itemList: []
    };
  },
  watch: {
    localdata: {
      immediate: true,
      handler(val) {
        this.itemList = val.map(val => val.text);
        this.initValue();
      }
    },
    modelValue: {
      immediate: true,
      handler() {
        this.initValue();
      }
    }
  },
  computed: {
    range() {
      return this.localdata.map(val => val.text)
    }
  },
  methods: {
    bindPickerChange(e) {
      this.itemIndex = e.detail.value
      const item = this.localdata[this.itemIndex];
      this.$emit('update:modelValue', item.value)
      this.$emit("change")
      this.showItemName = item.text;
    },
    cancel() {
      this.isOpenSelector = false;
      return true;
    },
    initValue() {
      this.itemIndex = undefined;
      this.showItemName = undefined;
      for (let i = 0; i < this.localdata.length; i++) {
        const item = this.localdata[i];
        if (item.value == this.modelValue) {
          this.itemIndex = i;
          this.showItemName = item.text;
        }
      }
    }
  },
}
</script>

<style lang="scss">
.base-picker {
  height: 35px;
  line-height: 35px;
  position: relative;
  flex: 1;
  flex-direction: row;
  align-items: center;
  text-align: right;

  input {
    color: #666666 !important;
  }
}

</style>
